<template>
  <div>
   <top/>
    <div class="main">
        <div class="backlink1"> <a href="Product.vue" style="text-decoration: none;">
<el-button type="info" plain style="font-size: large;" @click="redirectToProductForm">Return to {{ sessionScope.product.productId }}</el-button> 
        </a></div>
        <div class="message">
            <el-card style="width: 700px;height: 350px;" shadow="hover">
                <el-container>
                    <el-container>
                        <el-aside>
                            <img class="img0" src="../../assets/images/bird2.gif" alt="">
                            <el-divider style="margin-bottom: 20px;"></el-divider>
                            <p class="text0" style="padding-top:20px">{{ sessionScope.product.companion }}</p>
                        </el-aside>
                        <el-main>
                            <div class="msg">
                                 <p class="text0" >宠物信息:</p>
                             </div>
                            <div class="text item">
                                <table style="border-spacing: 11px;">
                                    <tr>
                                    <td>Item-ID:</td>
                                    <td>{{ sessionScope.item.itemId }}</td> <!-- 使用动态数据 -->
                                </tr>
                                <tr>
                                    <td>Description:</td>
                                    <td>{{ sessionScope.product.description }}</td> <!-- 使用动态数据 -->
                                </tr>
                                <tr>
                                    <td>Category:</td>
                                    <td>{{ sessionScope.product.category }}</td> <!-- 使用动态数据 -->
                                </tr>
                                <tr>
                                    <td>Inventory:</td>
                                    <td>
                                    <span v-if="sessionScope.item.quantity <= 0">Back ordered.</span>
                                    <span v-else>{{ sessionScope.item.quantity }} in stock.</span> <!-- 使用动态数据 -->
                                    </td>
                                </tr>
                                <tr>
                                    <td>Price:</td>
                                    <td>${{ sessionScope.item.listPrice }}</td> <!-- 使用动态数据 -->
                                </tr>
                            </table>
                            </div>
                                <el-button type="primary" round style="margin-left: 220px;margin-top:20px" @click="addToCart(sessionScope.item.itemId)">Add to Cart</el-button>
                        </el-main>
                    </el-container>
                </el-container>
            </el-card>
        </div>
    </div>
        <bottom/>
    </div>
</template>

<script>
import top from '../../components/Top.vue'
import bottom from '../../components/Bottom.vue'
export default {
  components: {top , bottom },
    name:   'Item',
    data() {
    return {
      sessionScope: {
        product: {
          image: "../../assets/images/bird2.gif",
          companion: "Great companion for up to 75 years",
          description: "Adult Male Amazon Parrot",
          category: "Amazon Parrot",
          productId:"AV-CB-01"
        },
        item: {
          itemId: "EST-18",
          quantity: 10000,
          listPrice: 193.50
        }
      }
    };
  },
    methods: {
      addToCart(itemId) {
    // 在这里执行添加到购物车的逻辑，可以使用 itemId 参数来确定要添加的商品
    console.log('Add to cart:', itemId);
  },
    redirectToProductForm() {
    // 构建跳转链接
    const productId = this.sessionScope.product.productId;
    const url = `productForm?productId=${productId}`;
    // 执行页面跳转
    window.location.href = url;
  }
}
}
</script>

<style scoped>
.main {
    margin-left:142px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    height: 100vh;
    width:1200px;
    background-color: #fff;
    /* 设置容器高度为视窗的高度 */
}

.backlink1 {
    position:absolute ;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    top:100px;
    padding-right: 0px;
    bottom: 330px;
    margin-right:160px
}

.message {
    position: relative;
    top: 25%;
    left: 25%;
    transform: translate(-50%, -50%);
    /* 使用 transform 属性将消息框居中 */
    width: 80%;
    /* 设置消息框的宽度，根据需要调整 */
}

.el-card {
    margin-left: 150px;
    border-radius: 15px;
}
.el-card:hover {
  animation: slideUpDown 0.5s forwards;
}

@keyframes slideUpDown {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-5px);
  }
}
.image-container {
    text-align: center;
    /* 水平居中 */
}

.el-aside {
    width: 400px;
    padding-top: 46px;
}

.img0 {
    display: inline-block;
    /* 让图片按照内容大小显示 */
    /* 确保图片不超出容器宽度 */
    margin-left: 95px;
    margin-bottom: -30px;
}

.text0 {
    padding-left: 20px;
    font-size: large;
    font-weight: bold;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.msg p{
    text-align:left;
    margin-left:-25px;
    margin-top:-10px;
}
.td {
    font-size: 14px; /* 设置所有的 <td> 元素的字体大小为 14 像素 */
  }


</style>